<template>
  <section class="account-panel b50">
    <van-row class="header-panel border">
      修改登录密码
      <div class="arrow" @click="goBack()">
        <van-icon name="arrow-left"/>
      </div>
    </van-row>
    <van-row class="form-panel mt44">
      <van-row :class="['item',active===1&&'on']">
        <van-field
            v-model="phoneTips"
            clearable
            label-width="60px"
            label="手机号"
            maxlength="11"
            readonly/>
      </van-row>
      <van-row :class="['item',active===2&&'on']">
        <van-row class="input">
          <van-field
              v-model="form.code"
              clearable
              label-width="60px"
              maxlength="6"
              type="number"
              label="验证码"
              @focus="()=>{this.active=2}"
              @blur="()=>{this.active=-1}"
              placeholder="请输入验证码"
          />
        </van-row>
        <div class="btns" @click="getPhoneCode">{{ captchaOnOff ? ('重新获取' + captchaNum + 's') : '获取验证码' }}</div>
      </van-row>
      <van-row :class="['item',active===3&&'on']">
        <van-field
            v-model="form.password"
            clearable
            label-width="60px"
            type="password"
            label="新密码"
            maxlength="20"
            @focus="()=>{this.active=3}"
            @blur="()=>{this.active=-1}"
            placeholder="请输入新密码"
        />
      </van-row>
      <van-row :class="['item',active===4&&'on']">
        <van-field
            v-model="form.repeatPassword"
            clearable
            label-width="60px"
            type="password"
            label="再次确认"
            maxlength="20"
            @focus="()=>{this.active=4}"
            @blur="()=>{this.active=-1}"
            placeholder="请输入再次确认"
        />
      </van-row>

    </van-row>
    <van-row class="footer">
      <div :class="['form-btns',disabled&&'disabled']" @click="onSubmit">确认</div>
    </van-row>
  </section>
</template>

<script>

import {BRNative} from "../../utils/brNative";

export default {
  data() {
    return {
      phoneTips: "",
      active: -1,
      inTime: null,
      captchaOnOff: false,
      captchaNum: 60,
      form: {
        phone: '',
        code: '',
        password: '',
        repeatPassword: ''
      }
    }
  },
  computed: {
    disabled() {
      return !this.form.code || !this.form.password || !this.form.repeatPassword || !this.form.phone
    }
  },
  created() {
    this.getLoad();
  },
  methods: {
    //初始化加载
    getLoad() {
      let params = {}
      this.$http(window.config.userHomeApi + '/info/get_user_phone', params).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRDialog(res.msg, this.$router.push('/account/home'));
        }
        let data = res.data;
        this.phoneTips = data.phoneTips;
        this.form.phone = data.phone;
      });
    },


    //获取验证码
    getPhoneCode() {
      let mPhone = this.form.phone;
      if (!this.BRIsPhone(mPhone)) {
        return false;
      }
      if (!this.captchaOnOff) {
        let params = {
          "phone": mPhone
        }
        this.$http(window.config.userHomeApi + '/info/set_pass/get_code', params).then((res) => {
          let code = res.code;
          if (code === 1) {
            this.captchaOnOff = true;
            fn();
            this.inTime = setInterval(fn, 1000);
          } else {
            this.BRToast(res.msg);
          }
        });
        const fn = () => {
          this.captchaNum--;
          this.captchaBtn = this.captchaNum;
          if (this.captchaNum === 0) {
            this.captchaOnOff = false;
            this.captchaBtn = '获取验证码'
            clearInterval(this.inTime);
            this.captchaNum = 60;
          }
        }
      }
    },
    //确定绑定
    onSubmit() {
      let mPhone = this.form.phone;
      let mCode = this.form.code;
      let mPassword = this.form.password;
      let mRepeatPassword = this.form.repeatPassword;
      if (!this.BRIsPhone(mPhone)) {
        return false;
      }
      if (!this.BRIsCode(mCode)) {
        return false;
      }
      if (!this.BRIsSetString(mPassword)) {
        this.BRToast('请输入新密码');
        return false;
      }
      if (mPassword !== mRepeatPassword) {
        this.BRToast('密码不一致');
        return false;
      }
      let params = {
        "phone": mPhone,
        "phoneCode": mCode,
        "userTemp": mPassword,
      }
      this.$http(window.config.userHomeApi + '/info/set_pass/auth_code', params).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRToast(res.msg);
          return;
        }
        BRNative.onPwdChange(res.data.userId, mPassword);
        this.$router.push("/account/passwordUpdateSuccess");

      });
    },
    //返回
    goBack() {
      this.$router.push('/account/home');
    },
  }
};
</script>

<style scoped lang='less'>
@import "../../assets/css/account/index.less";
</style>
